<template>
  <!-- 头部选项 -->
  <header-option>
    <template v-slot:btn>
      <div>
        <cs-btn v-if="innerMenu.exp.flag" btnText="导出" @click.native="exportlist" />
      </div>
    </template>
    <template v-slot:input>
      <cs-label labelText="车牌" width="197">
        <el-input class="cs-input" v-model.trim="headerData.carNum" clearable></el-input>
      </cs-label>
      <cs-label labelText="轴数" width="197">
        <el-input class="cs-input" v-model.trim="headerData.axleNum" clearable></el-input>
      </cs-label>
      <cs-label labelText="站点" width="230">
        <el-select placeholder="请选择" class="cs_select" v-model="headerData.site" clearable>
          <el-option
            v-for="item in siteData"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </cs-label>
      <cs-label labelText="是否超重" width="241">
        <el-select
          placeholder="请选择"
          class="cs_select"
          value=""
          v-model="headerData.isOverload"
          clearable
        >
          <el-option value="0" label="没有超重"></el-option>
          <el-option value="1" label="轻度超重"></el-option>
          <el-option value="2" label="较轻超重"></el-option>
          <el-option value="3" label="严重超重"></el-option>
        </el-select>
      </cs-label>
      <cs-label labelText="检测时间" class="creatTimeLabel">
        <!-- <el-date-picker
          v-model="headerData.value1"
          type="datetime"
          placeholder="请选择开始时间"
          align="right"
          :picker-options="headerData.pickerOptions"
          prefix-icon="none"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        <div class="selectTimeIcon_middle">-</div>
        <el-date-picker
          v-model="headerData.value2"
          type="datetime"
          placeholder="请选择结束时间"
          align="right"
          :picker-options="headerData.pickerOptions"
          prefix-icon="none"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker> -->
        <el-date-picker
          v-model="headerData.timeValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          class="timePicker"
        >
        </el-date-picker>
      </cs-label>
      <cs-btn type="search" btnText="查询" class="searcg_btn" @click.native="searchBtn" />
    </template>
  </header-option>
</template>

<script>
import _ from 'lodash'

import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'
import { getAllSiteName } from '@/service/operate/site_manage/site_manage'
export default {
  components: {
    headerOption,
    csBtn,
    csLabel
  },
  props: {
    innerMenu: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      siteData: [],
      siteName: '',
      headerData: {
        carNum: '',
        axleNum: '',
        isOverload: '',
        timeValue: '',
        site: '',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    'headerData.carNum'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('searchDataSearchData', {
          carNum: this.headerData.carNum,
          axleNum: this.headerData.axleNum,
          enterpriseName: this.headerData.enterpriseName,
          isOverload: this.headerData.isOverload ? this.headerData.isOverload - 0 : '',
          startTime: this.headerData.timeValue ? this.headerData.timeValue[0] : '',
          endTime: this.headerData.timeValue ? this.headerData.timeValue[1] : ''
        })
      }
    },
    'headerData.axleNum'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('searchDataSearchData', {
          carNum: this.headerData.carNum,
          axleNum: this.headerData.axleNum,
          enterpriseName: this.headerData.enterpriseName,
          isOverload: this.headerData.isOverload ? this.headerData.isOverload - 0 : '',
          startTime: this.headerData.timeValue ? this.headerData.timeValue[0] : '',
          endTime: this.headerData.timeValue ? this.headerData.timeValue[1] : ''
        })
      }
    },
    'headerData.enterpriseName'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('searchDataSearchData', {
          carNum: this.headerData.carNum,
          axleNum: this.headerData.axleNum,
          enterpriseName: this.headerData.enterpriseName,
          isOverload: this.headerData.isOverload ? this.headerData.isOverload - 0 : '',
          startTime: this.headerData.timeValue ? this.headerData.timeValue[0] : '',
          endTime: this.headerData.timeValue ? this.headerData.timeValue[1] : ''
        })
      }
    },
    'headerData.isOverload'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('searchDataSearchData', {
          carNum: this.headerData.carNum,
          axleNum: this.headerData.axleNum,
          enterpriseName: this.headerData.enterpriseName,
          isOverload: this.headerData.isOverload ? this.headerData.isOverload - 0 : '',
          startTime: this.headerData.timeValue ? this.headerData.timeValue[0] : '',
          endTime: this.headerData.timeValue ? this.headerData.timeValue[1] : ''
        })
      }
    },
    'headerData.timeValue'(newValue) {
      if (newValue === null) {
        this.$bus.$emit('searchDataSearchData', {
          carNum: this.headerData.carNum,
          axleNum: this.headerData.axleNum,
          enterpriseName: this.headerData.enterpriseName,
          isOverload: this.headerData.isOverload ? this.headerData.isOverload - 0 : '',
          startTime: this.headerData.timeValue ? this.headerData.timeValue[0] : '',
          endTime: this.headerData.timeValue ? this.headerData.timeValue[1] : ''
        })
      }
    }
  },
  created() {
    this.getAllSiteName()
  },
  beforeDestroy() {
    this.$bus.$off('searchDataSearchData')
    // this.$bus.$off('exportlist')
  },
  methods: {
    // 获取所有站点名称
    async getAllSiteName() {
      try {
        const data = await getAllSiteName()
        console.log('站点', data)
        if (data.code === 0) {
          const newData = [...new Set(data.data)]
          newData.forEach((item) => {
            this.siteData.push({
              value: item,
              label: item
            })
          })
        }
      } catch (err) {
        console.log(err)
        this.$message.error('获取站点数据失败')
      }
    },
    exportlist() {
      this.$bus.$emit('dataexportlist', {
        carNum: this.headerData.carNum,
        axleNum: this.headerData.axleNum,
        enterpriseName: this.headerData.site,
        isOverload: this.headerData.isOverload ? this.headerData.isOverload - 0 : '',
        startTime: this.headerData.timeValue ? this.headerData.timeValue[0] : '',
        endTime: this.headerData.timeValue ? this.headerData.timeValue[1] : ''
      })
    },
    searchBtn: _.throttle(function () {
      this.$bus.$emit('searchDataSearchData', {
        carNum: this.headerData.carNum,
        axleNum: this.headerData.axleNum,
        enterpriseName: this.headerData.site,
        isOverload: this.headerData.isOverload ? this.headerData.isOverload - 0 : '',
        startTime: this.headerData.timeValue ? this.headerData.timeValue[0] : '',
        endTime: this.headerData.timeValue ? this.headerData.timeValue[1] : ''
      })
    }, 1000)
  }
}
</script>

<style scoped>
/* 头部样式start */
.cs-input >>> .el-input__inner {
  /* 这里使用设计稿的152px宽输入框左边的标签显示不全 */
  width: 122px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

.cs_select >>> .el-input__inner {
  width: 152px;
  height: 32px;
  line-height: 32px;
  border-radius: 0;
}

/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.searcg_btn {
  margin-right: 30px;
}

.creatTimeLabel {
  width: 455px;
}

.timePicker {
  width: 500%;
  height: 32px;
  line-height: 32px !important;
  border-radius: 0;
  padding-left: 16px;
  padding-right: 0;
  /* color: #939393; */
  /* background-color: #ebeef2; */
}

.el-date-editor >>> .el-input__icon {
  line-height: 25px;
}

.el-date-editor >>> .el-range-separator {
  line-height: 25px;
}

.selectTimeIcon_middle {
  font-size: 23px;
  color: #e1e1e1;
  padding: 0 5px;
}
/* 头部样式end */
</style>
